<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录-枣课网</title>
    <meta name="keywords" content="枣课网">
    <meta name="description" content="枣课网、枣课教育">
    <link rel="stylesheet" href="__STATIC__/css/qx_index.css">
    <link rel="stylesheet" href="__STATIC__/css/qct-all.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/verify.slider.css" />
    <link rel="stylesheet" href="__STATIC__/bootstrap-5.1.3/css/bootstrap.css">
    <script src="__STATIC__/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="__STATIC__/js/verify.slider.js"></script>
    <style type="text/css">
        .form-bg{
            padding: 2em 0;
            margin-top:100px;
        }
        .form-horizontal{
            background: #fff;
            padding-bottom: 40px;
            border-radius: 15px;
            text-align: center;
        }
        .form-horizontal .heading{
            display: block;
            font-size: 35px;
            font-weight: 700;
            padding: 35px 0;
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 30px;
        }
        .form-horizontal .form-group{
            padding: 0 40px;
            margin: 0 0 25px 0;
            position: relative;
        }
        .form-horizontal .form-control{
            background: #f0f0f0;
            border: none;
            border-radius: 20px;
            box-shadow: none;
            padding: 0 20px 0 45px;
            height: 40px;
            transition: all 0.3s ease 0s;
        }
        .form-horizontal .form-control:focus{
            background: #e0e0e0;
            box-shadow: none;
            outline: 0 none;
        }
        .form-horizontal .form-group i{
            position: absolute;
            top: 12px;
            left: 60px;
            font-size: 17px;
            color: #c8c8c8;
            transition : all 0.5s ease 0s;
        }
        .form-horizontal .form-control:focus + i{
            color: #00b4ef;
        }
        .form-horizontal .fa-question-circle{
            display: inline-block;
            position: absolute;
            top: 12px;
            right: 60px;
            font-size: 20px;
            color: #808080;
            transition: all 0.5s ease 0s;
        }
        .form-horizontal .fa-question-circle:hover{
            color: #000;
        }
        .form-horizontal .main-checkbox{
            float: left;
            width: 20px;
            height: 20px;
            background: #11a3fc;
            border-radius: 50%;
            position: relative;
            margin: 5px 0 0 5px;
            border: 1px solid #11a3fc;
        }
        .form-horizontal .main-checkbox label{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }
        .form-horizontal .main-checkbox label:after{
            content: "";
            width: 10px;
            height: 5px;
            position: absolute;
            top: 5px;
            left: 4px;
            border: 3px solid #fff;
            border-top: none;
            border-right: none;
            background: transparent;
            opacity: 0;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        .form-horizontal .main-checkbox input[type=checkbox]{
            visibility: hidden;
        }
        .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
            opacity: 1;
        }
        .form-horizontal .text{
            float: left;
            margin-left: 7px;
            line-height: 20px;
            padding-top: 5px;
            text-transform: capitalize;
        }
        .form-horizontal .btn{
            float: right;
            font-size: 14px;
            color: #fff;
            background: #00b4ef;
            border-radius: 30px;
            padding: 10px 25px;
            border: none;
            text-transform: capitalize;
            transition: all 0.5s ease 0s;
        }
        @media only screen and (max-width: 479px){
            .form-horizontal .form-group{
                padding: 0 25px;
            }
            .form-horizontal .form-group i{
                left: 45px;
            }
            .form-horizontal .btn{
                padding: 10px 20px;
            }
        }

        .fw{
            color:#555;
        }

        #loginbtn:hover{
            background-color:#235378;
        }
    </style>
</head>
<body>
{include file="index/header" /}
<div class="container mt-5">
        <div class="row justify-content-center align-items-start">
            <div class="col-lg-5">
                <img src="__STATIC__/images/login_left_img.jpg" width="500" alt="">
            </div>
            <div class="col-lg-5">
                <form class="form-horizontal py-2">
                    <div class="py-1 mb-2 fw-bold">用户登录</div>
                    <div class="form-group">
                        <input type="email" class="form-control" name="login_username_new" id="loginUsername" placeholder="手机号" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="form-group help">
                        <input type="password" class="form-control" name="login_password" id="loginPassword" placeholder="密码">
                        <i class="fa fa-lock"></i>
                        <a href="#" class="fa fa-question-circle"></a>
                    </div>
                    <div class="form-group" style="display: flex; justify-content: center;">
                        <div id="verify_code" style="margin:0px auto;"></div>
                    </div>
                    <div class="form-group">
                        <div class="main-checkbox">
                            <input type="checkbox" value="None" id="checkbox1" name="check"/>
                            <label for="checkbox1"></label>
                        </div>
                        {:token()}
                        <span class="text" style="font-size:14px;">记住我</span>
                        <!--                        <button id="loginbtn" type="button" class="btn btn-default" onclick="sub()">立刻登录</button>-->
                        <div id="login_btn" type="button" class="btn btn-default" onclick="sub()">立刻登录</div>
                    </div>
                    <!--<div style="height:10px; display: flex; flex-direction: row; font-size:12px; color:#555; justify-content: flex-start">
                        <div style="margin-left:45px;"><a class="fw" href="/user/forgetPassword">忘记密码</a></div>
                        <div style="margin-left:15px;"><a class="fw" href="/user/signin">注册账户</a></div>
                    </div>-->
                </form>
            </div>
        </div>
    </div>
<div class="container fixed-bottom py-5 justify-content-center" style="display: flex;">
    <p>&copy; Copyright 2015 - 2022 枣课网. All Rights Reserved <a target="_blank" style="color:#626671;" href="https://beian.miit.gov.cn/#/Integrated/index">蒙ICP备16001362号</a> <a style="color:#626671;" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=15010502001739"> <img src="__STATIC__/images/network.png" style=""/>蒙公网安备 15010502001739号</a> 营业执照</p>
</div>
</body>
</html>
<script type="text/javascript" src="__STATIC__/admin/lib/layer/2.4/layer.js"></script>
<script>
    var type1 = document.getElementById('verify_code');
    var usercode = false;
    verifyFun.bar({
        dom:type1,
        width:'200',
        height:'30',
        hsize:'12',
        size:'12',
        diff:5,
        success:function() {
            usercode = true;
        },
        error:function() {
            usercode = false;
        }
    });
    function sub(){
        var username=$('#loginUsername').val();
        var password=$('#loginPassword').val();
        var __token__ = $("input[name='__token__']").val();

        if(usercode == false) {
            layer.open({
                type: 0,
                title: "提示",
                content: '请先人机验证',
            });
        }
else {
        if(username && password){
            if(!(/^1[3|5|7|8][0-9]\d{4,8}$/.test(username))){
                layer.open({
                    type: 0,
                    title: "提示",
                    content: '手机号码格式不正确！',
                });
                return false;
            }else{
                if(password.length<6){
                    layer.open({
                        type: 0,
                        title: "提示",
                        content: '密码输入不正确！',
                    });
                    return false

                }else{
                    $.ajax({
                        url:"{:url('/users/login')}",
                        type:'post',
                        data:{
                            login_username_new:username,
                            login_password:password,
                            //loginyzm:login_yzm,
                            __token__:__token__
                        },
                        success:function(data){
                            if(data.code == 0){
                                layer.open({
                                    type: 0,
                                    title: "提示",
                                    content: data.msg
                                });
                            }
                            if(data.code == 1){
                                $("#login_btn").html("登录中...");
                                window.location.href='/users/center';
                            }
                        }
                    })
                }
            }
        }else{
            layer.open({
                type: 0,
                title: "提示",
                content: '用户名及密码不能为空！',
            });
        }
        }
    }
</script>